<template>
  <div class="Pos">

   <el-row  >
    <el-col :span='7' class="order-list" id="Order-pos">
    <el-tabs>
      <el-tab-pane label="点餐">
        <el-table :data="tableData" border style="width=100%"> 
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="count" label="数量"></el-table-column>
          <el-table-column prop="price" label="金额"></el-table-column>
          <el-table-column prop="caozuo" width="100" label="操作" fixed="right">
           <template slot-scope="scope">
<el-button typt="text" size="small">删除</el-button>
<el-button typt="text" size="small">增加</el-button>
           </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="挂单">挂单</el-tab-pane>
      <el-tab-pane label="外卖">外卖</el-tab-pane>
    </el-tabs>
    <div class="div-btn">
      <el-button type="warning">挂单</el-button>
      <el-button type="danger">删除</el-button>
      <el-button type="success">结账</el-button>
    </div>
    </el-col>
     <el-col :span='17'>我是商品蓝</el-col> 
   </el-row >
  </div>
</template>

<script>
export default {
  name: "HePoslloWorld",
  mounted: function() {
    var order = document.body.clientHeight;
    document.getElementById("Order-pos").style.height = order + "px";
  },
  data() {
    return {
      tableData: [
        {
          goodsName: "可口可乐",
          price: 8,
          count: 1
        },
        {
          goodsName: "香辣鸡腿堡",
          price: 15,
          count: 1
        },
        {
          goodsName: "爱心薯条",
          price: 8,
          count: 1
        },
        {
          goodsName: "甜筒",
          price: 8,
          count: 1
        }
      ]
    };
  }
};
</script>

<style scoped>
.order-list {
  background-color: white;
  border-right: 1px solid blue;
  height: 100%;
}
.div-btn{
  margin-top: 10px
}
</style>
